<template>
  <div class="navlogin">
    <div class="userinfo">
      <div class="headimg"><img src="../../../../assets/img/Thumbnail.png" alt=""></div>
      <div class="username" :class="{active:isActive}"><div class="fl"><img src="../../../../assets/img/User-Icon.png" alt=""></div><input type="text" @focus="changeBorder($event)"></div>
      <div class="password" :class="{active:isActive}"><div class="fl"><img src="../../../../assets/img/Shape-6.png" alt=""></div><input type="text" @focus="changeBorder($event)"></div>
      <div class="userstatus">
        <div class="xl"><input type="checkbox" id="zddl" class="autoLog"> <p>自动登录</p></div>
        <div class="xr"><a href="forgetpwd.html" class="forgetPass">忘记密码</a></div>
      </div>
      <div class="submit">登陆login</div>
      <div class="register">
        <p><span>没有账号</span> <a href=""> 立即注册</a></p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      isActive: false
    }
  },
  methods: {
    changeBorder (e) {
      console.log(e)
      this.isActive = true
    }
  }
}
</script>

<style scoped type="text/stylus" lang="stylus">
.navlogin
  width:270px;height:270px;border-radius:5px;float:left;background:#fff;margin-top:15px;margin-left:10px;
  .userinfo
    width:215px;margin:0 auto;height:270px;
    .headimg img
      margin:0 auto;width:65px;height:65px;display:block;margin-bottom:5px;margin-top:5px;
    .username, .password
      border:1px solid #ccc;border-bottom-right-radius :3px;border-top-right-radius 3px;height:30px;border-top-left-radius :3px;border-bottom-left-radius :3px;
    .username
      margin-bottom:15px;
    .active
      border:1px solid rgb(221, 182, 108)
    .fl
      position:relative;width: 30px; height: 30px; border-right: 1px solid #ddd;text-align: center;
      border-top-left-radius :3px;border-bottom-left-radius :3px;float:left;
      img
        z-index:10;position:absolute;left:0;top:0;margin-top:7px;margin-left:6px;
    input
      padding-left:10px;line-height:30px;
    .fl:before
      content: ""; display: inline-block; width: 27px; height: 27px; background-color: #fff; position: absolute; right: 0px; top: 1px; z-index: 4;
    .fl:after
      content: ""; display: inline-block; width: 10px; height: 10px; background-color: #fff; border: 1px solid #ddd; transform: rotate(45deg); position: absolute; right: -2px; top: 8px; z-index: 3;
    .userstatus
      height:35px;width:215px;margin-top:15px;
      .xl
        float:left;
        p
          display:inline-block
      .xr
        float:right
    .submit
      width:215px;height:28px;
      line-height: 28px;
      font-size: 16px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      background-color: #dcb366;
      border-bottom: 2px solid #cba55e;
      color: #fff;
      text-align:center;
    .register
      text-align:right;
      margin-top:16px;
      span
        color: rgb(165, 165, 165);
      a
        color: rgb(60, 122, 202);

</style>
